<template>
  <div class="Bottomplay">
    <div class="Musicinformation">
      <div class="img">
        <img :src="imgurl" alt="#">
      </div>
      <div class="information">
        <div>
          <span v-for="(item,index) in muiscname" :key="index">{{item}}</span><i class="iconfont icon-aixin"></i>
          <p>{{name}}</p>
        </div>
      </div>
    </div>
    <div style="margin-top:-5px;position: absolute;left: 530px;">
      <div class="middle">
        <i class="iconfont icon-shangyishou"></i>
        <i class="iconfont " style="font-size:32px;" @click="getbofazting" :class="show==0?'icon-bofang4':'icon-bofang3'"></i>
        <i class="iconfont icon-xiayishou" style="position:absolute; left:115px"></i>
      </div>
      <div style="display: flex;align-items: center;">
        <span style="font-size:6px;opacity: 0.7;margin-right: 5px;">{{minute}}{{minute1}}:{{seconds}}{{seconds1}}</span>
        <el-progress :percentage="percentage" :show-text="false" :format="format" color="red" style="width:420px;" :stroke-width="2.5"></el-progress>
        <span style="font-size:6px;opacity: 0.7;margin-right: 5px;">{{time}}</span>
      </div>
      <audio controls="" preload="none" :src="audiourl" id="myaudio" ref="audio" style="display: none;"></audio>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus.js'
export default {
  name: 'Bottomplay',
  data() {
    return {
      show: 0,
      //音乐头像
      imgurl: '',
      //歌手名字
      name: '',
      //音乐名字
      muiscname: [],
      v: '',
      //进度条
      percentage: 0,
      //音乐时间
      musictime: 0,
      time: '',
      //秒数
      seconds: 0,
      seconds1: 0,
      //分钟
      minute: 0,
      minute1: 0,
      //存储定时器
      t: '',
      //音乐url
      audiourl: '',
      a: '',
      b: '',
      m: '',
      s: '',
      keyCode: 0
    }
  },
  methods: {
    format(percentage) {
      // return percentage === 100 ? '' : `${percentage}%`
    },
    getbofazting() {
      if (this.show == 0) {
        this.show = 1
        myaudio.play()
        this.keyCode = 1
        setInterval(this.fun(0), 1000)
      } else if (this.show == 1) {
        clearTimeout(this.t)
        myaudio.pause()
        this.keyCode = 0
        this.show = 0
      }
    },
    fun(e) {
      if (e) {
        this.percentage = 0
        this.seconds = 0
        this.seconds1 = 0
        this.minute = 0
        this.minute1 = 0
      }

      //每次调用先清除定时器
      clearInterval(this.t)
      var d = new Date(Number(this.musictime))
      let m = d.getUTCMinutes()
      let s = d.getUTCSeconds()
      if (d.getUTCMinutes() < 10 && d.getUTCSeconds() < 10) {
        this.time = '0' + m + ':' + '0' + s
      }
      if (d.getUTCMinutes() < 10) {
        this.time = '0' + m + ':' + s
      }
      if (d.getUTCSeconds() < 10) {
        this.time = m + ':' + '0' + s
      }
      //计算音乐一共有多少秒数
      this.a = m * 60 + s
      //计算进度条的速度
      this.b = 100 / this.a
      this.t = setInterval(() => {
        if (this.percentage > 99) {
          clearInterval(this.t)
        }
        this.percentage += this.b
        //计算音乐进度的时间
        this.seconds1 += 1
        if (this.seconds1 == 10) {
          this.seconds1 = 0
          this.seconds += 1
          if (this.seconds == 6) {
            this.seconds = 0
            this.minute1 += 1
            if (this.minute1 == 10) {
              this.minute1 = 0
              this.minute += 1
            }
          }
        }
      }, 1000)
    }
  },
  computed: {
    ...mapState({
      musicurllist: state => state.music.musicurllist
    })
  },
  mounted() {
    this.imgurl = localStorage.getItem('imgurl')
    this.name = localStorage.getItem('ruwuname')
    this.muiscname = localStorage.getItem('muisname')
    this.musictime = localStorage.getItem('musictime')
    this.audiourl = localStorage.getItem('audiourl')
    setInterval(this.fun(0), 1000)
    clearInterval(this.t)
  },
  created() {
    Bus.$on('music', (e, n, v, m, time) => {
      setTimeout(() => {
        //点击歌曲后立即播放
        myaudio.play()
        this.keyCode = 1
      }, 1000)

      this.show = 1
      setInterval(this.fun(1), 1000)
      this.$store.dispatch('getMusicurlList', { id: e })
      localStorage.setItem('imgurl', m)
      localStorage.setItem('ruwuname', n)
      localStorage.setItem('musictime', time)
      localStorage.setItem(
        'muisname',
        v.map(val => {
          return val.name
        })
      )
      //v发生改变就重新从本地存储拿取数据
      this.v = v
    })
  },
  watch: {
    musicurllist: {
      handler(v, o) {
        this.audiourl = v.map(val => {
          return val.url
        })
        localStorage.setItem('audiourl', this.audiourl)
      }
    },
    v: {
      handler(v, o) {
        this.imgurl = localStorage.getItem('imgurl')
        this.name = localStorage.getItem('ruwuname')
        this.muiscname = localStorage.getItem('muisname')
        this.musictime = localStorage.getItem('musictime')
      }
    },
    musictime: {
      handler(v, o) {
        var d = new Date(Number(v))
        let m = d.getUTCMinutes()
        let s = d.getUTCSeconds()
        if (d.getUTCMinutes() < 10 && d.getUTCSeconds() < 10) {
          this.time = '0' + m + ':' + '0' + s
        }
        if (d.getUTCMinutes() < 10) {
          this.time = '0' + m + ':' + s
        }
        if (d.getUTCSeconds() < 10) {
          this.time = m + ':' + '0' + s
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Bottomplay {
  width: 100%;
  height: 90px;
  border-top: 1px solid rgb(230, 229, 229);
  display: flex;
  align-items: center;

  .Musicinformation {
    display: flex;
    .img {
      width: 55px;
      height: 55px;
      background-color: rgb(229, 201, 165);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 18px;
      border-radius: 5px;

      img {
        width: 50px;
        height: 50px;
      }
    }
    .information {
      margin-left: 15px;
      display: flex;
      align-items: center;
      span {
        font-size: 15px;
        color: rgb(118, 118, 118);
      }
      p {
        margin-top: 5px;
        font-size: 13px;
        color: rgb(109, 109, 109);
      }
    }
    span:hover {
      cursor: pointer;
      color: black;
    }
    p:hover {
      cursor: pointer;
    }
  }
  .middle {
    display: flex;
    align-items: center;
    position: relative;
    left: 150px;
    i:nth-child(2) {
      font-size: 34px;
      margin: 0px 30px;
    }
    i:nth-child(1) {
      font-size: 20px;
    }
    i:nth-child(3) {
      font-size: 20px;
    }
    i:nth-child(2):hover {
      cursor: pointer;
      border-radius: 50px;
    }
    i:nth-child(1):hover {
      cursor: pointer;
      color: red;
    }
    i:nth-child(3):hover {
      cursor: pointer;
      color: red;
    }
  }
}
</style>